import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '#/adapter/form';
import { getPage, checkUserName, setStatus } from './api';
import { ref } from 'vue';
import { validationRules } from '#/utils/validationRules';

// 操作id
export const idKey = ref('userId');
export const handleId = ref('');

// 表格表单数据
export const formOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'userName',
      label: '登录账号',
      componentProps: {
        placeholder: '请输入登录账号',
      },
    },
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'nickName',
      label: '姓名',
      componentProps: {
        placeholder: '请输入姓名',
      },
    },
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'mobile',
      label: '手机号码',
      componentProps: {
        placeholder: '请输入手机号码',
      },
    },
    {
      fieldName: 'status',
      label: '状态',
      component: 'Select',
      componentProps: {
        options: [
          { label: '已启用', value: 1 },
          { label: '已禁用', value: 0 },
        ],
      },
    },
  ],
  wrapperClass: 'grid-cols-5',
};

// 表格数据
export const gridOptions: VxeTableGridOptions = {
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    { title: '登录账号', field: 'userName', width: 260 },
    { title: '姓名', field: 'nickName' },
    { title: '手机号', field: 'mobile', width: 160 },
    { title: '邮箱', field: 'email', width: 160 },
    {
      title: '账号状态',
      field: 'status',
      cellRender: {
        name: 'CellSwitch',
        props: {
          idKey: idKey.value,
          checkedValue: 1,
          changeQuery: setStatus,
        },
      },
      width: 160,
    },
    { title: '创建日期', field: 'createTime', width: 200 },
    { slots: { default: 'action' }, title: '操作', width: 160 },
  ],
  minHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await getPage({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: 'userId',
    label: '用户Id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入登录账号',
      allowClear: true,
    },
    fieldName: 'userName',
    label: '登录账号',
    dependencies: {
      disabled(values) {
        return values.userId;
      },
      rules: (values) => {
        return z
          .string()
          .min(1, { message: '请输入登录账号' })
          .superRefine(async (userName, ctx) => {
            if(!values.userId) {
              const res: any = await checkUserName({ userName });
              if (res.data) {
                ctx.addIssue({
                  path: ['userName'],
                  code: 'custom',
                  message: '用户名已存在',
                });
              }
            }
          });
      },
      triggerFields: ['userId'],
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入用户姓名',
      allowClear: true,
    },
    fieldName: 'nickName',
    label: '姓名',
    rules: 'required',
  },
  {
    component: 'InputPassword',
    componentProps: {
      placeholder: '请输入用户密码',
      allowClear: true,
      maxLength: 18,
    },
    rules: z
      .string()
      .regex(validationRules.password.reg, validationRules.password.tips),
    dependencies: {
      show(values) {
        return !values.userId;
      },
      triggerFields: ['userId'],
    },
    fieldName: 'password',
    label: '密码',
  },
  {
    label: '确认密码',
    fieldName: 'confirmPassword',
    component: 'InputPassword',
    componentProps: {
      placeholder: '请再次输入密码',
      allowClear: true,
      maxLength: 18,
    },
    dependencies: {
      triggerFields: ['userId', 'confirmPassword'],
      show(values) {
        return !values.userId;
      },
      rules: (values) => {
        return z
          .string()
          .regex(validationRules.password.reg, validationRules.password.tips)
          .refine(
            (confirmPassword) => {
              return confirmPassword === values.password;
            },
            {
              message: '确认密码必须与密码一致',
            },
          );
      },
    },
    rules: z
      .string()
      .min(1, { message: validationRules.password.tips })
      .regex(validationRules.password.reg, validationRules.password.tips),
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入用户手机号',
      allowClear: true,
      maxLength: 11,
    },
    fieldName: 'mobile',
    label: '手机号',
    rules: z
      .string()
      .regex(validationRules.phone.reg, validationRules.phone.tips),
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入用户邮箱',
      allowClear: true,
    },
    fieldName: 'email',
    label: '邮箱',
    rules: z
      .string()
      .regex(validationRules.email.reg, validationRules.email.tips),
  },
];

// 重置密码scheme
export const resetFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: idKey.value,
    label: 'Id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'InputPassword',
    componentProps: {
      placeholder: '请输入用户密码',
      allowClear: true,
      maxLength: 18,
    },
    rules: z
      .string()
      .regex(validationRules.password.reg, validationRules.password.tips),
    dependencies: {
      show(values) {
        return !values.userId;
      },
      triggerFields: ['userId'],
    },
    fieldName: 'password',
    label: '密码',
  },
  {
    label: '确认密码',
    fieldName: 'confirmPassword',
    component: 'InputPassword',
    componentProps: {
      placeholder: '请再次输入密码',
      allowClear: true,
      maxLength: 18,
    },
    dependencies: {
      triggerFields: ['userId', 'confirmPassword'],
      show(values) {
        return !values.userId;
      },
      rules: (values) => {
        return z
          .string()
          .regex(validationRules.password.reg, validationRules.password.tips)
          .refine(
            (confirmPassword) => {
              return confirmPassword === values.password;
            },
            {
              message: '确认密码必须与密码一致',
            },
          );
      },
    },
    rules: z
      .string()
      .min(1, { message: validationRules.password.tips })
      .regex(validationRules.password.reg, validationRules.password.tips),
  },
];
